<template>
	<section class="content">
		<!-- <navbarTow :title="$t('bottom.navTow[4]')" :right_show="false" :left_show="false" :type="1" ref="navbar">
		</navbarTow> -->
		<topHeader></topHeader>
		<div class="noticeBox">
			<div class="noticeBoxLeft">
				<img src="../assets/img/laba.png" alt="">
				<p>{{$t('newList.title137')}}</p>
			</div>
			<van-notice-bar left-icon="" @click="openMsg" :text="str_tongshi" color="#fff" class="tongzhi" />
			<!-- 图标：volume-o -->
		</div>
		<div class="userTitel">
			<div class="userTitel">
				{{$t('gerenzhongxin.yonghuzhanghao')}}
			</div>
			<div class="userTitelTow">
				<!-- {{$t('gerenzhongxin.zhanghuyue')}} -->
				{{user.name}} {{user.money}}
				<img src="../assets/img/shuaxin.png" alt="" :class="[rotate?'go':'aa']" @click="start">
			</div>
		</div>
		<div class="userNavBox">
			<div class="userNavItem" @click="goNextPage('/recharge')">
				<img src="../assets/newimg/5.png" alt="">
				{{$t('gerenzhongxin.chongzhi')}}
			</div>
			<div class="userNavItem" @click="goNextPage('/drawing')">
				<img src="../assets/newimg/3.png" alt="">
				{{$t('gerenzhongxin.tixian')}}
			</div>
			<div class="userNavItem" @click="fs()">
				<img src="../assets/newimg/7.png" alt="">
				{{$t('gerenzhongxin.fanshui')}}
			</div>
			<div class="userNavItem" @click="showerweima">
				<img src="../assets/newimg/4.png" alt="">
				{{$t('newNoForm.title10')}}
			</div>
			<!-- <div class="userNavItem" @click="goNextPage('/bank')">
				<img src="../assets/img/4.png" alt="">
				{{$t('gerenzhongxin.yinhanghukou')}}
			</div> -->
			<div class="userNavItem" @click="goNextPage('/betrecord')">
				<img src="../assets/newimg/1.png" alt="">
				{{$t('gerenzhongxin.baobiao')}}
			</div>
			<div class="userNavItem" @click="goNextPage('/active')">
				<img src="../assets/newimg/6.png" alt="">
				{{$t('newNoForm.title11')}}
			</div>
			<div class="userNavItem" @click="goNextPage('/msg')">
				<img style="height: 30px;margin-top: 6px;" src="../assets/newimg/2.png" alt="">
				{{$t('h_title.xiaoxi')}}
			</div>
			
			<!-- <div class="userNavItem" @click="login_out">
				<img src="../assets/img/4.png" alt="">
				{{$t('common.tuichudenglu')}}
			</div> -->
		</div>
		<!-- <div class="showList" :class="[rotateTow?'goTow':'aaTow']">
			<div class="showListTitLE" @click="startList">
				<img src="../assets/img/zhankai.png" alt="" :class="[rotateTow?'goThree':'aaThree']">
				{{rotateTow?$t('newNoForm.title13'):$t('newNoForm.title12')}}
			</div>
			<div class="showListBox">
				<div class="showListBoxItem" v-for="it in 20">
					<img src="../assets/img/4.png" alt="">
					<p>{{$t('newNoForm.title11')}}</p>
				</div>
			</div>
		</div> -->
		<!-- <section class="grzx"> -->
		<!-- <section class="gr-top">
                <article class="gr-top-1">
                    <h6>{{user.name}}</h6>
                    <img src="~path_img/vip.png" alt="">
                    <h5>LV:{{user.level}}</h5>
                </article>
                <article class="gr-top-2">
                   <router-link to="/information">
                        <img src="~path_img/a42.png" alt="">{{$t('gerenzhongxin.xiugaimima')}}
                    </router-link>
					<router-link to="/dailizhongxin" v-if="user.is_daili">
					    <img src="~path_img/agent.png" alt="">
					    {{$t('gerenzhongxin.dailizhongxin')}}
					</router-link>
					<router-link to="/dailizhongxin" v-if="user.is_daili">
					    <img src="~path_img/agent.png" alt="">
					    {{$t('gerenzhongxin.dailizhongxin')}}
					</router-link>
                    <button @click="fun_lingqu">{{$t('gerenzhongxin.lingqufuli')}}</button>
                </article>
               <article class="gr-top-3" v-if="user.is_daili">
                    <router-link to="/dailizhongxin">
                        <img src="~path_img/agent.png" alt="">
                        {{$t('gerenzhongxin.dailizhongxin')}}
                    </router-link>
                </article>
            </section> -->
		<!-- <div class="topboxdsf">
				<div class="onebox">
					<div class="sadf">
						<img src="../assets/images/userAvarte.png" alt="">
						{{user.name}}
					</div>
					<router-link to="/information" class="sadfTow">
						<div class="sadfTow">
							<img src="../assets/images/genghuanmima.png" alt="">
							{{$t('gerenzhongxin.xiugaimima')}}
						</div>
					</router-link>
				</div>
				<div class="towbox" @click="showerweima">
					<img src="../assets/images/erweima.png" alt="">
				</div>
			</div> -->
		<!-- <div class="liushuixianBox">
				<p>{{$t('gerenzhongxin.tikuanliushuizhi')}}</p>
				<div class="linebox">

				</div>
				<p>0.00/0.00</p>
			</div> -->
		<!-- <div class="zhanghuyuBox">
				<div class="titleBox">
					<img src="../assets/images/zhanghuyue.png" alt="">
					{{$t('gerenzhongxin.zhanghuyue')}}
				</div>
				<div class="contentBox">
					<div class="leftsad">
						{{user.money}}
					</div>
					<router-link to="/exchange" class="zijinhuishou">
					<div class="zijinhuishou" @click="fs()">
						{{$t('gerenzhongxin.fanshui')}}
					</div>
					</router-link>
				</div>
			</div> 
			<div class="navsss">
				<div class="navOne">
					<router-link to="/recharge" class="navOneItem navOneItemtOW">
						<div>
							{{$t('gerenzhongxin.chongzhi')}}
						</div>
					</router-link>
					<router-link to="/drawing" class="navOneItem ">
						<div>
							{{$t('gerenzhongxin.tixian')}}
						</div>
					</router-link>
					<router-link to="/bank" class="navOneItem ">
						<div>
							{{$t('gerenzhongxin.yinhanghukou')}}
						</div>
					</router-link>
				</div>
				<div class="navtOW">
					{{$t('gerenzhongxin.lishuxiaji')}}
				</div>
			</div>
			<div class="fulibaobiao">
				<div class="titless">
					<div class="lefttit">
						<img src="../assets/images/fuli.png" alt="">
						{{$t('gerenzhongxin.fulihuodong')}}
					</div>
					<router-link to="/active">
						<div class="moreBox">
							{{$t('common.gengduo')}}>
						</div>
					</router-link>
				</div>
				<router-link :to="'/activedetail?id='+huodong.id">
					<div class="conboxsad" v-if="huodong && show_bol">
						<div class="leftText">
							<p>{{huodong.title}}</p>
							<p>{{huodong.created_at}}</p>
						</div>
						<div class="rightImg">
							<img src="../assets/images/fulihuodong.png" alt="">
						</div>
					</div>
				</router-link>
				<div class="conboxsad" v-if="!huodong">
					<div class="leftText">
						<p>无</p>
					</div>
					<div class="rightImg">
						<img src="../assets/images/fulihuodong.png" alt="">
					</div>
				</div>
			</div>
			<div class="fulibaobiao">
				<div class="titless">
					<div class="lefttit">
						<img src="../assets/images/baobiao.png" alt="" style="width: 22px;">
						{{$t('gerenzhongxin.baobiao')}}
					</div>
					<router-link to="/betrecord">
						<div class="moreBox">
							{{$t('gerenzhongxin.xiangxi')}}>
						</div>
					</router-link>
				</div>
				<div class="conboxsad">
					<div class="leftText">
						<p v-if="recharge && show_bol">{{recharge.money}}{{$t('common.yuan')}}</p>
						<p v-else>{{$t('newList.title1')}}</p>
						<p v-if="recharge && show_bol">{{recharge.created_at}}</p>
					</div>
					<div class="rightImg">
						<img src="../assets/images/baobiaoTow.png" alt="">
					</div>
				</div>
			</div>-->
		<!-- 	<section class="gr-content-1">
				<article>
					<h6>{{$t('gerenzhongxin.zhuzhanghuyue')}}</h6>
					<p><img src="~path_img/a46.png" alt="">{{!user.money?'0.00':user.money}}</p>
				</article>
				<article>
					<h6>{{$t('gerenzhongxin.benyuexiazhuzonge')}}</h6>
					<p><img src="~path_img/a46.png" alt="">{{!user.liushui_total?'0.00':user.liushui_total}}</p>
				</article>
			</section>
			<section class="gr-content-2">
				<router-link to="/recharge" class="on">
					<img src="~path_img/a47.png" alt="">{{$t('gerenzhongxin.chongzhi')}}
				</router-link>
				<a href="javascript:;" @click="fs()">
					<img src="~path_img/a48.png" alt="">{{$t('gerenzhongxin.fanshui')}}
				</a>
				<router-link to="/drawing">
					<img src="~path_img/a49.png" alt="">{{$t('gerenzhongxin.tixian')}}
				</router-link>
			</section>
			<section class="gr-content-3">
				<article>
					<span>{{$t('gerenzhongxin.xiaoxi')}}</span>
					<router-link to="/msg">{{$t('common.gengduo')}}</router-link>
				</article>
				<section class="gr-content-3-nr">
					{{msg}}
				</section>
			</section>
			<section class="gr-content-3">
				<article>
					<span>{{$t('gerenzhongxin.fulihuodong')}}</span>
					<router-link to="/huodong">{{$t('common.gengduo')}}</router-link>
				</article>
				<section class="huodong" v-if="huodong && show_bol" v-cloak><router-link
						:to="'/activedetail?id='+huodong.id">
						<img :src="this.$https.baseUrl + huodong.title_img" class="img1" alt="">
						<p>{{huodong.title}}</p>
					</router-link></section>
			</section> -->
		<!-- <section class="gr-content-3">
				<article>
					<span>{{$t('gerenzhongxin.baobiao')}}</span>
					<router-link to="/betrecord">{{$t('common.xiangxi')}}</router-link>
				</article>
				<section class="gr-content-baobiao">

					<article v-if="recharge && show_bol">
						<p><img src="~path_img/a47.png" alt=""><span>{{$t('gerenzhongxin.chongzhi')}}</span></p>
						<p>
							<span>{{recharge.created_at}}</span>
						</p>
						<p>
							<span>{{recharge.money}}{{$t('common.yuan')}}</span>
						</p>
						<p :style="{'color':status_class(recharge.status)}">
							{{$t('common.baobiao_status['+recharge.status+']')}}
						</p>
					</article>
					<article v-if="drawing && show_bol">
						<p><img src="~path_img/a47.png" alt=""><span>{{$t('gerenzhongxin.tixian')}}</span></p>
						<p>
							<span>{{drawing.created_at}}</span>
						</p>
						<p>
							<span>{{drawing.money}}{{$t('common.yuan')}}</span>
						</p>
						<p :style="{'color':status_class(drawing.status)}">
							{{$t('common.baobiao_status['+drawing.status+']')}}
						</p>
					</article>
				</section>
			</section> 
		</section>-->
		<button class="btn" @click="login_out">{{$t('common.tuichudenglu')}}</button>
		<div v-show="erweimashow" class="erweimabox" @click="erweimashow = false">
			<img :src="erweima" alt="">
		</div>

		<article style="height: 1.4rem;"></article>
		<bottom></bottom>
		<van-popup v-model="show" round position="bottom" :style="{ height: '266px' }" class="fanshui">
			<h5>{{$t('gerenzhongxin.shishifanshui')}}</h5>
			<h6>
				$<span>{{!fs_money?'0.00':fs_money}}</span>
			</h6>
			<p>{{$t('gerenzhongxin.shishifanshui_str')}}</p>
			<article>
				<button @click="show = false">{{$t('common.quxiao')}}</button>
				<button @click="fun_fanshu">{{$t('common.queren')}}</button>
			</article>
		</van-popup>
	</section>
</template>

<script>
	import Bottom from "@/components/bottom"
	import navbarTow from "@/components/navbarTow"
	import topHeader from "@/components/topHeader"
	import vueSeamlessScroll from 'vue-seamless-scroll'
	import {
		Popup,
		NoticeBar,
	} from "vant";
	export default {
		name: "gerenzhongxin",
		components: {
			Bottom,
			navbarTow,
			[Popup.name]: Popup,
			topHeader,
			vueSeamlessScroll,
			[NoticeBar.name]: NoticeBar,
		},
		data() {
			return {
				show: false,
				// baobiao_list: [
				//     {"id": "1","type": "存款","time":"05-01","str":"27:43","money":"200.03","str2":"转速快","return":"成功"},
				//     {"id": "1","type": "存款","time":"05-01","str":"27:43","money":"200.03","str2":"转速快","return":"成功"}
				// ],
				msg: '',
				user: [],
				recharge: [],
				drawing: [],
				show_bol: false,
				huodong: [],
				fs_money: '0.00',
				ok: 1,
				erweima: '',
				erweimashow: false,
				str_tongshi: '',
				rotate: false,
				rotateTow: false,
			}
		},
		mounted() {
			this.nav_onLoad()
		},
		methods: {
			showerweima() {
				this.$https.fetchGet('/m/qrcode', {}).then(res => {
					this.erweima = res.data
					this.erweimashow = true
				})
			},
			fs() {
				this.$https.fetchPost('/m/getfs', {}).then(res => {
					let data = res.data
					this.fs_money = data.fs_money
					this.show = true
				})
			},
			fun_fanshu() {
				var that = this;
				console.log(that.ok)
				if (!that.ok) {
					return;
				}
				that.ok = 0;
				this.$https.fetchPost('/m/send_fs', {}).then(res => {
					this.ok = 1
					this.$toast(res.data);
					// this.show = false
				}).catch(err => {
					this.$toast('网络异常');
				})

			},
			fun_lingqu() {
				this.$https.fetchGet('/m/level', {}).then(res => {
					this.$toast(this.$t('common.lingquchenggong'))
				})
			},
			nav_onLoad() {
				this.$https.fetchGet('/m/personal', {}).then(res => {
					let data = res.data
					this.user = [];
					if (data.msg && data.msg.content) {
						this.msg = data.msg.content
					}
					this.str_tongshi = data.system_notices.content + '        線上人數' + parseInt(Math.random() *
						10000, 10)
					this.drawing = data.drawing
					this.recharge = data.recharge
					this.$store.commit('user', data.member)
					this.user = data.member
					this.huodong = data.data;
					this.$nextTick(res => {
						this.show_bol = true
					})
				})
			},
			fun_zijinhuishou() { ///资金回收
				this.$https.fetchPost('/member/transfer_all', {}).then(res => {
					this.nav_onLoad()
				}).catch(err => {
					this.$toast('网络异常');
				})
			},
			login_out() {
				this.$https.fetchGet('/m/logout', {}).then(res => {
					this.$store.commit('token', '')
					this.$store.commit('user', '')
					this.$router.push('/login')
				})
			},
			status_class(i) {
				let _status_class = ''
				switch (i) {
					case 0:
						_status_class = ''
						break;
					case 2:
						_status_class = '#20a53a'
						break;
					case 3:
						_status_class = '#ff3300'
						break
					default:
						_status_class = ''
				}
				return _status_class
			},
			start() {
				this.rotate = !this.rotate;
				this.nav_onLoad()
				console.log(this.rotate)
			},
			startList() {
				this.rotateTow = !this.rotateTow;
			},
			openMsg() {
				this.$router.push('/msg')
			},
			goNextPage(path) {
				this.$router.push(path)
			},
		}
	}
</script>
<style>
	app {
		min-height: 100%;
	}
</style>
<style scoped lang="less">
	.topboxdsf {
		width: 100%;
		margin: 0px auto 25px;
		background-image: url('../assets/images/yonghubg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 120px;
		display: flex;
		align-items: center;
		padding: 40px 0px 0px 15px;

		.onebox {
			.sadf {
				display: flex;
				align-items: center;
				font-size: 20px;
				color: #000;

				img {
					width: 18px;
					height: 20px;
					margin-right: 5px;
				}
			}

			.sadfTow {
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #000;
				margin-top: 10px;

				img {
					width: 12px;
					height: 15px;
					margin-right: 5px;
				}
			}
		}

		.towbox {
			img {
				width: 26px;
				height: 26px;
				margin-left: 30px;
			}
		}
	}

	.liushuixianBox {
		text-align: left;

		p:nth-child(1) {
			font-size: 15px;
			color: #fff;
		}

		p:nth-child(3) {
			font-size: 10px;
			color: #988448;
		}

		.linebox {
			width: 100%;
			height: 3px;
			border-radius: 3px;
			background-color: #fdcf3a;
			margin: 8px 0px;
		}
	}

	.zhanghuyuBox {
		margin-top: 10px;

		.titleBox {
			display: flex;
			align-items: center;
			font-size: 18px;
			color: #fed339;

			img {
				width: 20px;
				height: 23px;
				margin-right: 5px;
			}
		}

		.contentBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10px;

			.leftsad {
				width: 135px;
				height: 40px;
				line-height: 40px;
				color: #fff;
				padding-left: 45px;
				font-size: 18px;
				border-radius: 0px 5px 5px 0px;
				background-image: url('../assets/images/yue.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.zijinhuishou {
				padding: 3px 10px;
				color: #fff;
				font-size: 15px;
				background: linear-gradient(#770c17, #441418);
				border-radius: 3px;
			}
		}
	}

	.navsss {
		.navOne {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.navOneItem {
				width: 32%;
				font-size: 15px;
				color: #fff;
				margin-top: 20px;
				margin-bottom: 10px;
				padding: 4px 0px;
				border-radius: 3px;
				background-color: #413f40;
			}

			.navOneItemtOW {
				background: linear-gradient(#770c17, #441418);
			}
		}

		.navtOW {
			width: 100%;
			padding: 4px 0px;
			color: #fff;
			font-size: 15px;
			border-radius: 3px;
			background-color: #413f40;
		}
	}

	.fulibaobiao {
		margin-top: 15px;

		.titless {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.lefttit {
				display: flex;
				align-items: center;
				font-size: 18px;
				color: #fed339;

				img {
					width: 24px;
					height: 23px;
					margin-right: 5px;
				}
			}

			.moreBox {
				padding: 2px 13px;
				color: #333;
				font-size: 12px;
				background-color: #f9ca35;
				border-radius: 3px;
			}
		}

		.conboxsad {
			margin-top: 10px;
			padding: 0px 20px;
			border-radius: 5px;
			background-color: #413f40;
			height: 90px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.leftText {
				text-align: left;

				p:nth-child(1) {
					font-size: 20px;
					color: #fff;
				}

				p:nth-child(2) {
					font-size: 12px;
					color: #fedc18;
					margin-top: 10px;
				}
			}

			.rightImg {
				img {
					width: 70px;
					height: 60px;
				}
			}
		}
	}

	.grzx {
		padding: 0px .4rem .4rem;

		.gr-top {
			background: linear-gradient(to right, #ec5c4d, #fa2563);
			border-radius: .2rem;
			padding: .4rem .5rem;

			.gr-top-1 {
				color: #fff;
				display: flex;
				align-items: center;

				h6 {
					font-size: .6rem;
					font-weight: normal;
					width: 7rem;
					text-align: left;
				}

				img {
					width: 1.2rem;
					margin-right: .2rem;
				}

				h5 {
					font-weight: normal;
					font-size: .56rem;
				}
			}

			.gr-top-2 {
				padding: .4rem 0;
				display: flex;
				color: #fff;
				justify-content: space-between;

				a {
					display: flex;
					align-items: center;
					font-size: .44rem;
					color: #fff;

					img {
						margin-right: .2rem;
						width: .7rem;
					}
				}

				button {
					background: linear-gradient(to right, #ef6443, #f8752c);
					font-size: .3rem;
					display: block;
					border: none;
					border-radius: .1rem;
					padding: .1rem .2rem;
				}
			}

			.gr-top-3 {
				padding: .2rem 0 0 5.6rem;

				a {
					color: #fff;
					font-size: .36rem;

					img {
						width: .5rem;
						position: relative;
						top: .1rem;
					}
				}
			}
		}

		.gr-content-1 {
			display: flex;
			justify-content: space-between;
			padding: .6rem 0;

			article {
				width: 50%;
				color: #fff;
				text-align: left;

				h6 {
					font-size: .4rem;
					margin-bottom: .3rem;
				}

				p {
					display: flex;
					font-size: .6rem;

					img {
						width: .58rem;
						height: .62rem;
						margin-right: .22rem;
					}

					color: #eb8f74;
				}

				&:last-child {
					text-align: right;

					p {
						justify-content: right;
					}
				}
			}
		}

		.gr-content-2 {
			display: flex;
			justify-content: space-between;
			margin-bottom: .3rem;

			a {
				width: 32.5%;
				background: #24282c;
				color: #fff;
				font-size: .42rem;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: .2rem;
				padding: .36rem 0;

				img {
					margin-right: .2rem;
					width: .7rem;
				}

				&.on {
					background: linear-gradient(to right, #ef6443, #f8752c);
				}
			}
		}

		.gr-content-3 {
			padding: .4rem 0;

			&>article {
				display: flex;
				justify-content: space-between;
				color: #fff;
				font-size: .42rem;
				margin-bottom: .3rem;

				span {
					font-weight: bold;
				}

				a {
					font-size: .36rem;
					color: #fff;
				}
			}

			.gr-content-3-nr {
				font-size: .34rem;
				color: #fff;
				text-align: left;
				background: linear-gradient(#2c3134, #24292c);
				padding: .36rem;
				border-radius: .2rem;
				word-wrap: break-word;
			}

			.gr-content-baobiao {
				padding-top: .5rem;
				font-size: .38rem;
				color: #fff;

				article {
					display: flex;
					width: 100%;
					margin-bottom: .4rem;
					align-items: center;

					p {
						width: 18%;

						span {
							display: block;
							height: .54rem;
							line-height: .54rem;
						}

						&:nth-child(1) {
							img {
								width: .5rem;
								margin: .05rem 0;
							}

							span {}
						}

						&:nth-child(2) {
							width: 30%;
							text-align: center;
						}

						&:nth-child(3) {
							width: 32%;
							text-align: center;
						}

						&:nth-child(4) {
							width: 20%;
							line-height: 1rem;
						}
					}

				}
			}

			.huodong {
				a {
					padding: .3rem 0;

					&>img {
						width: 100%;
						height: 3rem;
					}

					&>p {
						color: #fff;
						font-size: .34rem;
						text-align: left;
						background: linear-gradient(#2c3134, #24292c);
						padding: .3rem .4rem;
						border-radius: .1rem;
					}
				}
			}
		}

		.error {
			color: #ff3300 !important;
		}

		
	}
.btn {
			background-color: #fdcb46;
			color: #fff;
			width: 95%;
			margin: 100px auto 0;
			border: none;
			font-size: .38rem;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 5px;
		}
	.fanshui {
		background-color: #1f2337;

		h5 {
			color: #fff;
			font-size: .38rem;
			font-weight: normal;
			border-bottom: 1px solid #282c32;
			line-height: 1.2rem;
			margin-bottom: .6rem;
		}

		h6 {
			color: #fff;
			font-weight: normal;
			font-size: .4rem;
			height: 1.7rem;

			span {
				margin-left: .2rem;
				font-size: .72rem;
				position: relative;
				top: .04rem;
			}
		}

		p {
			color: #d65f48;
			font-size: .36rem;
			height: 1.2rem;
		}

		article {
			display: flex;
			padding: 0 .4rem;
			justify-content: space-between;

			button {
				border-radius: .15rem;
				width: 48%;
				font-size: .42rem;
				color: #fff;
				line-height: 1.4rem;
				border: none;

				&:first-child {
					background-color: #313648;
				}

				&:last-child {
					background-image: linear-gradient(#eb5a4d, #ff2467);
				}
			}
		}
	}

	.erweimabox {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.35);
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;

		img {
			width: 250px;
		}
	}

	.noticeBox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 4px;
		box-sizing: border-box;

		.noticeBoxLeft {
			width: 17%;
			display: flex;
			align-items: center;

			img {
				width: 25px;
				height: 16px;
			}

			p {
				font-size: 12px;
				color: #ffc93e;
			}
		}

		.tongzhi {
			width: 83%;
			background-color: #222222;
			color: #fff;
			font-size: 12px;
			height: 30px;
			padding: 0px 0px;
			box-sizing: border-box;
		}
	}

	// 新
	.aa {
		transition: all 2s;
	}

	.go {
		transform: rotate(180deg);
		transition: all 2s;
	}

	.userTitel {
		width: 100%;
		margin: 5px 0 0;
		color: #fff;
		text-align: center;
		font-size: 16px;
	}

	.userTitelTow {
		margin: 5px auto 0;
		min-width: 100px;
		max-width: 200px;
		background-color: #fff;
		color: #f79421;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 26px;
		border-radius: 13px;

		img {
			width: 15px;
			height: 15px;
			margin-left: 5px;
		}
	}

	.userNavBox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.userNavItem {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 30px;
			font-size: 14px;
			color: #fff;

			img {
				width: 35px;
				height: 35px;
				margin-bottom: 15px;
			}
		}
	}

	.showList {
		width: 100%;
		height: 115px;
		position: fixed;
		bottom: 50px;

		.showListTitLE {
			width: 90px;
			height: 25px;
			background-color: #212529;
			color: #fff;
			border-radius: 10px;
			position: absolute;
			top: -18px;
			right: 20px;
			font-size: 13px;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 11px;
				height: 13px;
				margin-right: 2px;
			}
		}

		.showListBox {
			width: 100%;
			background-color: #212529;
			height: 110px;
			overflow-x: scroll;
			display: flex;
			align-items: center;

			.showListBoxItem {
				flex: 1;
				margin-right: 15px;
				margin-left: 5px;

				p {
					font-size: 14px;
					color: #fff;
					width: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-top: 3px;
					margin-left: 10px;
					text-align: left;
				}

				img {
					width: 70px;
					height: auto;

				}
			}
		}
	}

	.aaTow {
		transition: all 2s;
	}

	.goTow {
		transform: translateY(100px);
		transition: all 2s;
	}

	.aaThree {
		transition: all 2s;
	}

	.goThree {
		transform: rotate(180deg);
		transition: all 2s;
	}
</style>